<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="description" content="This tool is used to help Debug You TM Platform.">
    <!-- Twitter meta-->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:site" content="@pratikborsadiya">
    <meta property="twitter:creator" content="@pratikborsadiya">
    <!-- Open Graph Meta-->
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Vali Admin">
    <meta property="og:title" content="Vali - Free Bootstrap 4 admin theme">
    <meta property="og:url" content="http://pratikborsadiya.in/blog/vali-admin">
    <meta property="og:image" content="http://pratikborsadiya.in/blog/vali-admin/hero-social.png">
    <meta property="og:description" content="Vali is a responsive and free admin theme built with Bootstrap 4, SASS and PUG.js. It's fully customizable and modular.">
    <title>RD Tool - Chat Page</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Main CSS-->
    <link rel="stylesheet" type="text/css" href="assets_m/css/main.css">
    <!-- Font-icon css-->
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <body class="app sidebar-mini rtl">
    <!-- Navbar-->
    <header class="app-header"><a class="app-header__logo" href="index.html">Remote Debug Tool</a>
      <!-- Sidebar toggle button--><a class="app-sidebar__toggle" href="#" data-toggle="sidebar" aria-label="Hide Sidebar"></a>
      <!-- Navbar Right Menu-->
      <ul class="app-nav">
        <li class="app-search">
          <input class="app-search__input" type="search" placeholder="Search">
          <button class="app-search__button"><i class="fa fa-search"></i></button>
        </li>
        <!--Notification Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-toggle="dropdown" aria-label="Show notifications"><i class="fa fa-bell-o fa-lg"></i></a>
          <ul class="app-notification dropdown-menu dropdown-menu-right">
            <li class="app-notification__title">You have 4 new notifications.</li>
            <div class="app-notification__content">
              <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-envelope fa-stack-1x fa-inverse"></i></span></span>
                  <div>
                    <p class="app-notification__message">Lisa sent you a mail</p>
                    <p class="app-notification__meta">2 min ago</p>
                  </div></a></li>
              <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-danger"></i><i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i></span></span>
                  <div>
                    <p class="app-notification__message">Mail server not working</p>
                    <p class="app-notification__meta">5 min ago</p>
                  </div></a></li>
              <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-success"></i><i class="fa fa-money fa-stack-1x fa-inverse"></i></span></span>
                  <div>
                    <p class="app-notification__message">Transaction complete</p>
                    <p class="app-notification__meta">2 days ago</p>
                  </div></a></li>
              <div class="app-notification__content">
                <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-primary"></i><i class="fa fa-envelope fa-stack-1x fa-inverse"></i></span></span>
                    <div>
                      <p class="app-notification__message">Lisa sent you a mail</p>
                      <p class="app-notification__meta">2 min ago</p>
                    </div></a></li>
                <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-danger"></i><i class="fa fa-hdd-o fa-stack-1x fa-inverse"></i></span></span>
                    <div>
                      <p class="app-notification__message">Mail server not working</p>
                      <p class="app-notification__meta">5 min ago</p>
                    </div></a></li>
                <li><a class="app-notification__item" href="javascript:;"><span class="app-notification__icon"><span class="fa-stack fa-lg"><i class="fa fa-circle fa-stack-2x text-success"></i><i class="fa fa-money fa-stack-1x fa-inverse"></i></span></span>
                    <div>
                      <p class="app-notification__message">Transaction complete</p>
                      <p class="app-notification__meta">2 days ago</p>
                    </div></a></li>
              </div>
            </div>
            <li class="app-notification__footer"><a href="#">See all notifications.</a></li>
          </ul>
        </li>
        <!-- User Menu-->
        <li class="dropdown"><a class="app-nav__item" href="#" data-toggle="dropdown" aria-label="Open Profile Menu"><i class="fa fa-user fa-lg"></i></a>
          <ul class="dropdown-menu settings-menu dropdown-menu-right">
            <li><a class="dropdown-item" href="page-user.html"><i class="fa fa-cog fa-lg"></i> Settings</a></li>
            <li><a class="dropdown-item" href="page-user.html"><i class="fa fa-user fa-lg"></i> Profile</a></li>
            <li><a class="dropdown-item" href="page-login.html"><i class="fa fa-sign-out fa-lg"></i> Logout</a></li>
          </ul>
        </li>
      </ul>
    </header>
    <!-- Sidebar menu-->
    <div class="app-sidebar__overlay" data-toggle="sidebar"></div>
    <aside class="app-sidebar">
      <div class="app-sidebar__user"><img class="app-sidebar__user-avatar" src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/48.jpg" alt="User Image">
        <div>
          <p class="app-sidebar__user-name">Blue</p>
          <p class="app-sidebar__user-designation">Frontend Developer</p>
        </div>
      </div>
      <ul class="app-menu">
        <li><a class="app-menu__item" href="index.html"><i class="app-menu__icon fa fa-laptop"></i><span class="app-menu__label">Brief</span></a></li>
        <li><a class="app-menu__item" href="commandlist.html"><i class="app-menu__icon fa fa-th-list"></i><span class="app-menu__label">Command List
        <li><a class="app-menu__item" href="chat.html"><i class="app-menu__icon fa fa-dashboard"></i><span class="app-menu__label">Chat</span></a></li>
        <li><a class="app-menu__item" href="problems.html"><i class="app-menu__icon fa fa-file-text"></i><span class="app-menu__label">Problems</span></a></li>
      </ul>
    </aside>
    <main class="app-content">
      <div class="app-title">
        <div>
          <h1><i class="fa fa-dashboard"></i> Chat Page</h1>
          <p>Start a beautiful journey here</p>
        </div>
        <ul class="app-breadcrumb breadcrumb">
          <li class="breadcrumb-item"><i class="fa fa-home fa-lg"></i></li>
          <li class="breadcrumb-item"><a href="#">Chat Page</a></li>
        </ul>
      </div>
      <div class="row">
        <div class="col-md-12">
          <div class="tile">
            <div class="tile-body">
            Create a beautiful dashboard

            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-9">
          <div class="tile">
            <h3 class="tile-title">Chat Room</h3>
            <div class="messanger">
              <div class="messages" id="chat_room">
                <div class="message"><img src="assets_m/img/machine_32px.jpeg">
                  <p class="info">Hello there!<br>Good Morning</p>
                </div>
                <div class="message me"><img src="assets_m/img/human_32px.jpeg">
                  <p class="info">Hi<br>Good Morning</p>
                </div>
              </div>
              <div class="sender">
                <input id="chat_message_textbox" type="text" placeholder="Send Message">
                <button id="chat_message_btn" class="btn btn-primary" type="button"><i class="fa fa-lg fa-fw fa-paper-plane"></i></button>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-3">
          <div class="tile">
            <h3 class="tile-title">User List</h3>
            <div class="tile-body">
              <!--div id="demo-map" style="height: 400px"></div-->
                <form>
                  <fieldset id="" class="form-group">
                    <legend>Select One</legend>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios1" type="radio" name="optionsRadios" value="169.254.1.30:7600" checked="">169.254.1.30:7600(Arm)
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios2" type="radio" name="optionsRadios" value="169.254.1.30:8081">169.254.1.30:8081(Dut)
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios3" type="radio" name="optionsRadios" value="169.254.1.30:8082">169.254.1.30:8082(Power)
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios4" type="radio" name="optionsRadios" value="169.254.1.31:7600">169.254.1.31:7600(Arm)
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios5" type="radio" name="optionsRadios" value="169.254.1.31:8081">169.254.1.31:8081(Dut)
                      </label>
                    </div>
                    <div class="form-check">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios6" type="radio" name="optionsRadios" value="169.254.1.31:8082">169.254.1.31:8082(Power)
                      </label>
                    </div>
                    <div class="form-check disabled">
                      <label class="form-check-label">
                        <input class="form-check-input" id="optionsRadios7" type="radio" name="optionsRadios" value="" disabled="">Send To Slave (TM)
                      </label>
                    </div>
                  </fieldset>
                  <div class="form-check">
                    <label class="form-check-label">
                      <input class="form-check-input" type="checkbox">Check me out
                    </label>
                  </div>
                </form>
            </div>
          </div>
        </div>
      </div>
    </main>
    <!-- Essential javascripts for application to work-->
    <script src="assets_m/js/jquery-3.2.1.min.js"></script>
    <script src="assets_m/js/popper.min.js"></script>
    <script src="assets_m/js/bootstrap.min.js"></script>
    <script src="assets_m/js/main.js"></script>
    <!-- The javascript plugin to display page loading on top-->
    <script src="assets_m/js/plugins/pace.min.js"></script>
    <!-- Page specific javascripts-->
    <!-- Google analytics script-->
    <script type="text/javascript">
      if(document.location.hostname == 'pratikborsadiya.in') {
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', 'UA-72504830-1', 'auto');
        ga('send', 'pageview');
      }
    </script>
    <script type="text/javascript">
      $(document).ready(function(){
        $("#chat_message_btn").click(function(){
          var data = $("#chat_message_textbox").val()+'\r\n'
          //target = $("radio").checked()
          var check_val = $("input:radio:checked").val();
          var pars = check_val.split(":")
          var ip = pars[0]
          var port = pars[1]
          var msg = {"ip":ip,"port":port,"data":data}
          // xx
          var request_str = encodeURIComponent(JSON.stringify(msg));
          // Add send message to chat room
          my_message_div = '<div class="message me">'+'<img src="assets_m/img/human_32px.jpeg">'+'<p class="info">'+ data +'</p> </div>'
          $("#chat_room").append(my_message_div)
          // Send message to webserver

          $.ajax({
            type: "GET",
            url: "/chat/message",
            data: request_str,
            async:false,
            success: function(data){
                      if (data=="[]"){
                        // Haven't message.
                        return;
                      }
                      var array = JSON.parse(data);

                      for(var i=0; i<array.length; i++){
                        its_message_div = '<div class="message">'+'<img src="assets_m/img/machine_32px.jpeg">'+'<p class="info">'+ array[i] +'</p> </div>'

                        $("#chat_room").append(its_message_div)
                      }

                      },
            error: function(data){
                        err_message_div = '<div class="message">'+'<img src="assets_m/img/machine_32px.jpeg">'+'<p class="info">(null)</p> </div>'
                        
                        $("#chat_room").append(err_message_div)
                      }
          });

        });
      });
    </script>
  </body>
</html>